<template>
  <el-tabs type="border-card" v-model="chartName" @tab-click="getData">
    <el-tab-pane label="学历统计图" name="bar1">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('1')">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportExcel"> 导出excel </el-button>
        <el-button type="primary" @click="handlePrint('educationBarEchart')">
          打印图表
        </el-button>
      </div>
      <div class="educationBarEchart" v-if="chartName === 'bar1'" style="width: 100%; height: 560px">
        <img
          src=""
          id="educationBarEchart"
          style="height: 450px; width: 100%; display: none"
        />
        <education-echart
          ref="educationBarEchart"
          :chartData="chartData1"
        ></education-echart>
      </div>
    </el-tab-pane>
    <el-tab-pane label="年龄分布统计图" name="bar2">
      <div class="import-btn">
        <el-button type="primary" @click="downPdf('2')">
          导出pdf
        </el-button>
        <el-button type="primary" @click="exportPersonExcel">
          导出excel
        </el-button>
        <el-button type="primary" @click="handlePrint('ageBarChart')">
          打印图表
        </el-button>
      </div>
      <div
        class="ageBarChart"
        v-if="chartName === 'bar2'"
        style="width: 100%; height: 560px"
      >
        <img
          src=""
          id="ageBarChart"
          style="height: 450px; width: 100%; display: none"
        />
        <AgeBarEChart
          ref="ageBarChart"
          :chartData="chartData2"
        ></AgeBarEChart>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import EducationEchart from "./components/EducationEChart.vue";
import AgeBarEChart from "./components/AgeBarEChart.vue";
import {getAgeChart, getEducationChart} from "@/api/orgstatchart/index.js";
import { getPdf } from "@/api/tool/getPdf.js";
import print from "print-js";
export default {
  components: {
    EducationEchart,
    AgeBarEChart,
  },
  data() {
    return {
      chartName: "bar1",
      chartData1: {},
      chartData2: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handlePrint(id) {
      console.log("d", id);
      var barChartDataUrl
      if (id === "educationBarEchart") {
        barChartDataUrl = this.$refs.educationBarEchart.barChartDataUrl;
      } else {
        barChartDataUrl = this.$refs.ageBarChart.barChartDataUrl;
      }
      var printImgId = document.getElementById(id);
      printImgId.setAttribute("src", barChartDataUrl);
      document.getElementById(id).style.display = "block";
      let userAgent = navigator.userAgent;
      //判断是否Firefox浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        console.log("Firefox");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          // header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否chorme浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        console.log("Chrome");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          // header: "12321321",
          // headerStyle: "font-size: 20px;text-align: center;font-weight: 100",
          style: `@page {margin:0 10mm};}`,
        });
      }
      //判断是否IE浏览器
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        console.log("ActiveXObject");
        printJS({
          printable: id, // 标签元素id
          type: "html",
          style: `@page {margin:0 10mm};}`,
        });
      }
      document.getElementById(id).style.display = "none";
    },
    exportExcel() {
      this.download(
        "person/exportEducationExcel",
        {},
        `学历统计图.xlsx`
      );
    },
    exportPersonExcel() {
      this.download(
        "person/exportAgeExcel",
        {},
        `年龄分布统计图.xlsx`
      );
    },
    downPdf(index) {
      if (index === "1") {
        this.downloadReprot( "学历统计图", "educationBarEchart");
      } else if (index === "2") {
        this.downloadReprot("年龄分布统计图", "ageBarChart");
      }
    },
    downloadReprot(fileName, domName) {
      // 下载过程中进行锁屏
      const loading = this.$loading({
        lock: true,
        text: "请稍等,下载中.....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getPdf(fileName, domName);
      // 关闭锁屏
      loading.close();
    },
    getData() {
      if (this.chartName === 'bar1') {
        getEducationChart().then((res) => {
          this.chartData1 = res.data;
        })
      }else {
        getAgeChart().then((res) => {
          this.chartData2 = res.data;
        })
      }
    },
  },
};
</script>

<style>
.import-btn {
  margin-left: 60px;
  margin-bottom: -23px;
}
</style>
